<template>
    <Form ref="form" :model="data" :rules="rules"  >
        <Row :gutter="24" type="flex">
            <Col span="4">
                <DatePicker type="daterange" :start-date="startDate" transfer :options="dateOption" v-width="'100%'" v-model="data.date" placeholder="下次回访日期选择" element-id="date" :clearable="true" @on-change="onSearchItem"/>
            </Col>
            <Col span="4">
                <Input v-model="data.name" placeholder="请输入患者姓名/手机号/诊疗号" element-id="name" clearable @on-blur="onSearchItem('')" @on-enter="onSearchItems('')"  @on-clear="onSearchItem('')"/>
            </Col>
            <Col span="3">
                <FormItem  prop="disease" label-for="disease">
                    <Select v-model="data.personnels" placeholder="上次回访人" transfer element-id="diagnosis" clearable @on-change="onSearchItem" @on-clear="onSearchItem">
                        <Option v-for="items in members" :key="'member' + items.id" :value="items.id" :disabled="+items.status === 0">{{items.name}}</Option>
                    </Select>
                </FormItem>
            </Col>
            <Col span="3">
                <FormItem  prop="personnel" label-for="personnel">
                    <Select v-model="data.personnel" placeholder="归属人" transfer element-id="personnel" clearable @on-change="onSearchItem" @on-clear="onSearchItem">
                        <Option v-for="items in members" :key="'member' + items.id" :value="items.id" :disabled="+items.status === 0">{{items.name}}</Option>
                    </Select>
                </FormItem>
            </Col>
            <Col span="3">
                <FormItem  prop="disease" label-for="disease">
                    <Select v-model="data.diagnosis" placeholder="就诊类型" transfer element-id="diagnosis" clearable @on-change="onSearchItem" @on-clear="onSearchItem">
                        <Option v-for="items in types" :key="'type' + items.id" :value="items.id" :disabled="+items.status === 0">{{items.name}}</Option>
                    </Select>
                </FormItem>
            </Col>
            <Col span="7">
                <FormItem  prop="label" label-for="label">
                    <Select v-model="data.label" placeholder="请选择标签" transfer filterable multiple @on-change="onSearchItem" @on-clear="onSearchItem">
                        <OptionGroup v-for="items in labels" :key="'group' + items.id" :label="items.name">
                            <Option v-for="item in items.children" :value="item.id" :key="'label'+item.id" :disabled="+item.status === 0">{{ item.name }}</Option>
                        </OptionGroup>
                    </Select>
                </FormItem>
            </Col>
            <Col span="3">
                <FormItem  prop="in_hospital" label-for="in_hospital">
                    <Select transfer v-width="140" v-model="data.in_hospital"  element-id="in_hospital"  placeholder="请选择住院状态" :clearable="true" @on-change="onSearchItem" @on-clear="onSearchItem">
                        <Option v-for="items in hospital" :key="'label'+items.value" :value="items.value" >{{items.label}}</Option>
                    </Select>
                </FormItem>
            </Col>
        </Row>
    </Form>
</template>
<script>
    import { mapState } from 'vuex';
    export default {
        data () {
            return {
                startDate: new Date(),
                dateOption: {
                    disabledDate (pick) {
                        const curDate = new Date();
                        curDate.setTime(curDate.getTime() - (3600 * 1000 * 24));
                        let reVal = 0;
                        if (pick < curDate) {
                            reVal = 1;
                        }
                        return reVal;
                    }
                },
                grid: {
                    xl: 4,
                    lg: 8,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                collapse: false,
                data: {
                    name: '',
                    date: [new Date(), new Date()],
                    consultant: '',
                    personnel: '',
                    personnels: '',
                    diagnosis: '',
                    label: [],
                    in_hospital:''
                },
                rules: {

                }
            }
        },
        props: ['labels', 'members', 'types','hospital'],
        computed: {
            ...mapState('admin/layout', [
                'isMobile'
            ]),
            labelWidth () {
                return this.isMobile ? undefined : 80;
            },
            labelPosition () {
                return this.isMobile ? 'top' : 'right';
            }
        },
        created () {
            let jumpPage = window.localStorage.getItem('jumpDetail')
            if (jumpPage) {
                let parsePage = JSON.parse(jumpPage)
                this.data.personnel = parsePage.belong.toString()
            }
            this.$emit('search', this.data)
        },
        destroyed () {
            window.localStorage.removeItem('jumpDetail')
        },
        methods: {
            onSearchItem (val, v) {
                if (val === '') {
                    this.data.date = ''
                    this.data.label = []
                    this.data.personnel = ''
                    this.data.personnels = ''
                    this.data.diagnosis = ''
                    this.data.in_hospital=''
                } else this.data.name = ''
                console.log(val,'val')
                this.$emit('search', this.data)
            },
            onSearchItems (val, v) {
                if (this.data.name === '') {

                } else {
                    if (val === '') {
                        this.data.date = ''
                        this.data.label = []
                        this.data.personnel = ''
                        this.data.personnels = ''
                        this.data.diagnosis = ''
                        this.data.in_hospital=''
                    } else this.data.name = ''
                    this.$emit('search', this.data)
                }
            }
        }
    }
</script>
